<template>
    <div class="cart-page">
        <van-nav-bar title="购物车" />

        <div class="cart-items">
            <div v-for="(item, index) in cartItems" :key="item.id" class="cart-item">
                <div class="cart-item-image-container">
                    <img :src="item.image" alt="商品图片" />
                </div>
                <div class="cart-item-details">
                    <span class="cart-item-name">{{ item.name }}</span>
                    <span>¥{{ item.price }}</span>
                    <button @click="incrementQuantity(index)">+</button>
                    <span>{{ item.quantity }}</span>
                    <button @click="decrementQuantity(index)" :disabled="item.quantity <= 1">-</button>
                    <button @click="removeItem(index)">删除</button>
                </div>
            </div>
        </div>

        <div class="cart-footer">
            <span>总价: ¥{{ totalPrice }}</span>
        </div>

        <Tabbar />
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Tabbar from '@/components/common/Tabbar.vue';

// 示例花卉数据
const flowerData = [
    {
        id: 1,
        image: 'https://pic4.zhimg.com/v2-ba6acd42b8db51c37ead002bc288e40c_r.jpg',
        name: '香槟玫瑰',
        price: 99,
        quantity: 0
    },
    {
        id: 2,
        image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.OFkso5ZtIAhqdKK_qjxDxQHaIE?rs=1&pid=ImgDetMain', // 占位符图片
        name: '玫瑰花束',
        price: 59,
        quantity: 0
    },
    {
        id: 3,
        image: 'https://img14.360buyimg.com/n1/jfs/t22873/111/2469398113/456305/125ec3df/5b81ead5N910d0ff9.jpg', // 占位符图片
        name: '韩式花束',
        price: 79,
        quantity: 0
    },
];

// 购物车商品列表
const cartItems = ref([...flowerData]);

// 计算总价
const totalPrice = computed(() => {
    return cartItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0);
});

// 增加商品数量
const incrementQuantity = (index) => {
    cartItems.value[index].quantity++;
};

// 减少商品数量（如果数量大于1，或者根据您的业务逻辑，如果允许数量为0则移除这个条件）
const decrementQuantity = (index) => {
    if (cartItems.value[index].quantity > 1) {
        cartItems.value[index].quantity--;
    }
    // 注意：如果允许数量为0，上面的if条件应该被移除
};

// 删除商品
const removeItem = (index) => {
    cartItems.value.splice(index, 1);
};
</script>

<style scoped>
.cart-page {
    padding: 20px;
}

.cart-items {
    margin-bottom: 20px;
}

.cart-item {
    margin-bottom: 15px;
}

.cart-item-image-container {
    text-align: center;
    margin-bottom: 10px;
}

.cart-item-image-container img {
    width: 100px; /* 调整图片大小 */
    height: 100px; /* 调整图片大小 */
    object-fit: cover; /* 保持图片比例 */
    border-radius: 8px; /* 可选：添加圆角 */
}

.cart-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-item-name {
    font-weight: bold; /* 可选：加粗商品名称 */
}

.cart-item span {
    flex: 0 0 auto; /* 防止价格、数量和按钮占据过多空间 */
}

.cart-item button {
    margin: 0 5px;
    padding: 5px 10px;
}

.cart-footer {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
}
</style>